<template>
  <el-row :gutter="10">
    <el-col
      v-for="item in iconList"
      :key="item.name"
      :xs="12"
      :sm="8"
      :md="8"
      :lg="3"
      :xl="3"
    >
      <div class="nav-card-main">
        <svg-icon
          :icon-class="item.name"
          :color="item.color"
          width="32px"
          height="32px"
        />
        <p class="nav-title">
          {{ item.text }}
        </p>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import type { NavIconObject } from '../type'

const iconList:Array<NavIconObject> = [
  { name: 'user', color: '#69c0ff', text: '用户' },
  { name: 'analysis', color: '#69c0ff', text: '分析' },
  { name: 'shopCart', color: '#ff9c6e', text: '商品' },
  { name: 'order', color: '#b37feb', text: '订单' },
  { name: 'bill', color: '#ffd666', text: '票据' },
  { name: 'message', color: '#5cdbd3', text: '消息' },
  { name: 'tag', color: '#ff85c0', text: '标签' },
  { name: 'setting', color: '#ffc069', text: '设置' }
]

</script>

<style lang="scss" scoped>

.link {
  display: block;
}

.nav-card-main {
  margin-bottom: 8px;
  padding: 10px 0;
  text-align: center;
  background-color: #fff;
  cursor: pointer;

  .nav-title {
    margin: 8px 0;
  }
}
</style>
